<template>
  <div
    class="scrolling-text-container"
    :style="{
      height: containerHeight
    }"
  >
    <div
      class="scrolling-text"
      :style="{
        transform: `translateX(${position}px)`,
        fontSize: fontSize,
        fontWeight: fontWeight
      }"
    >
      <span
        v-for="(char, index) in displayText"
        :key="index"
        class="text-char"
        :style="{ color: textColor }"
      >
        {{ char }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'

const props = defineProps({
  // 显示文本
  text: {
    type: String,
    default: '创新突破，永续发展'
  },
  // 滚动速度（像素/帧），负数为向左滚动
  speed: {
    type: Number,
    default: -1
  },
  // 容器高度
  containerHeight: {
    type: String,
    default: '60px'
  },
  // 容器背景颜色
  containerBgColor: {
    type: String,
    default: '#f5f7fa'
  },
  // 文字颜色
  textColor: {
    type: String,
    default: '#409eff'
  },
  // 字体大小
  fontSize: {
    type: String,
    default: '24px'
  },
  // 字体粗细
  fontWeight: {
    type: String,
    default: 'bold'
  },
  // 是否循环（设置为false时只滚动一次）
  loop: {
    type: Boolean,
    default: true
  },
  // 重复次数（loop为false时有效）
  repeatCount: {
    type: Number,
    default: 1
  }
})

const position = ref(0)
const currentRepeat = ref(0)
let animationId = null

// 处理文本显示，如果需要可以在这里添加空格或其他格式
const displayText = computed(() => {
  return props.text.split('')
})

const animate = () => {
  position.value += props.speed

  // 检查是否需要停止动画
  if (!props.loop && currentRepeat.value >= props.repeatCount) {
    cancelAnimationFrame(animationId)
    return
  }

  // 当文字完全滚出时
  const textElement = document.querySelector('.scrolling-text')
  const containerElement = document.querySelector('.scrolling-text-container')

  if (textElement && containerElement) {
    if (props.speed < 0 && position.value < -textElement.offsetWidth) {
      position.value = containerElement.offsetWidth
      currentRepeat.value++
    } else if (props.speed > 0 && position.value > containerElement.offsetWidth) {
      position.value = -textElement.offsetWidth
      currentRepeat.value++
    }
  }

  animationId = requestAnimationFrame(animate)
}

onMounted(() => {
  const containerElement = document.querySelector('.scrolling-text-container')
  if (containerElement) {
    // 初始位置：向左滚动从右侧进入，向右滚动从左侧进入
    position.value = props.speed < 0
      ? containerElement.offsetWidth
      : -document.querySelector('.scrolling-text')?.offsetWidth || 0
    animate()
  }
})

onBeforeUnmount(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
})
</script>

<style scoped>
.scrolling-text-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.scrolling-text {
  position: absolute;
  white-space: nowrap;
  display: flex;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.text-char {
  margin: 0 5px;
  transition: all 0.3s ease;
}
</style>